<template>
  <div class="showdetail">
    <!-- 导航 介绍/须知/推荐 -->
    <!-- <div
      class="anchor_container"
      id="anchor-component"
      v-show="scrollflag"
    >
      <div class="anchor">
        <div class="anchor-title">
          <div class="anchor-title-item anchor-selected">演出介绍</div>
        </div>
        <div class="anchor-title">
          <div class="anchor-title-item">购票须知</div>
        </div>
        <div class="anchor-title">
          <div class="anchor-title-item">推荐</div>
        </div>
      </div>
    </div> -->
    <!-- 演出顶部 -->
    <div class="detail_basic">
      <div class="detail_header">
        <div class="detail_poster lazyimage com-img-bg">
          <img
            :src="showInfo.posterUrl"
            alt=""
            class="poster"
          >
        </div>
        <div class="detail_header_info">
          <div class="detail_name">{{showInfo.name}}</div>
          <div class="detail_price_bar">
            <div class="detail_price">
              <span>188</span>
              <span class="detail_price_line">-</span>
              <span>1688</span>
              <span class="detail_price_yuan">元</span>
            </div>
            <div class="seat-container">座位图</div>
          </div>
        </div>
      </div>
      <!-- 位置 -->
      <div class="detail_venue_address_container">
        <div class="venue_address_container">
          <div class="venue_container">
            <div class="date webketbox">{{showInfo.showTimeRange}}</div>
            <div class="address">
              <div class="address_city webketbox">{{showInfo.cityName}}</div>
              <div class="address_shop webketbox">{{showInfo.shopName}}</div>
            </div>
          </div>
          <div class="venue_guide">
            <img
              src=""
              alt=""
              class="travel_guide_icon mt10"
            >
          </div>
        </div>
      </div>
      <div class="detail_service_titles_container">
        <div class="service_titles">
          <div
            class="service_title_item"
            v-for="(serviceTitle,type) in showInfo.serviceTitleList"
            :key="type"
          >
            <div class="service_icon_container">
              <!-- 怎么根据type获取图片 -->
              <img
                src=""
                alt=""
              >
            </div>
            <div class="item_title">{{serviceTitle.key}}</div>
          </div>
        </div>
      </div>
      <div class="detail_buttons_container">
        <div class="detail_buttons">
          <div class="detail_button">
            <div class="image_container">
              <img
                class="collect_image collect_img_off"
                src=""
                alt=""
              >
            </div>
            <div class="button_text">想看</div>
          </div>
          <div class="detail_button share_button ">
            <div class="image_container">
              <img
                class="collect_image collect_img_off"
                src=""
                alt=""
              >
            </div>
            <div class="button_text">已看过</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 限时优惠 -->
    <div
      v-if="setTicketList"
      class="detail_flag"
    >
      <div class="detail_block detail-promotion">
        <div class="detail_title">
          <span class="title">限时优惠</span>
          <div>
            <div class="count">共{{setTicketList.length}}个</div>
          </div>
        </div>
        <div class="detail_content">
          <div class="promotion-container">
            <div class="promotion-container-main">
              <div class="type">
                <img
                  class="label"
                  src=""
                  alt=""
                >
                <span v-if="setTicketList[0].discountShow">{{setTicketList[0].discountShow}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="detail_footer"></div>
      </div>
    </div>
    <!-- 暂无优惠 -->
    <!-- 什么都没有 -->

    <!-- 演出 -->
    <div class="detail_main fold_mask_modal">
      <!-- 演出介绍 -->
      <div class="detail_introduction">
        <!-- 演出亮点 -->
        <div
          class="detail_light detail_block"
          v-if="brightPointList"
        >
          <div class="detail_title">
            <div class="title">演出亮点</div>
          </div>
          <div class="detail_content">
            <div class="light_content">
              <!-- <div
                class="light-content-list"
                v-for="(brightPoint,id) in brightPointList"
                :key="id"
              >
                <img
                  src=""
                  alt=""
                >
                <div class="light-box">
                  <div class="title">金牌编剧邹静之，10年打造剧本</div>
                  <div class="subtitle">张国立、王刚、张铁林相聚话剧舞台，延续“铁三角”情缘</div>
                </div>
              </div> -->
              <div
                class="light-content-list"
                v-if="brightPointList[0].title"
              >
                <img
                  src=""
                  alt=""
                >
                <div class="light-box">
                  <div class="title">{{brightPointList[0].title}}</div>
                  <div class="subtitle">{{brightPointList[0].content}}</div>
                </div>
              </div>
              <div
                class="light-content-list"
                v-if="brightPointList[1].title"
              >
                <img
                  src=""
                  alt=""
                >
                <div class="light-box">
                  <div class="title">{{brightPointList[1].title}}</div>
                  <div class="subtitle">{{brightPointList[1].content}}</div>
                </div>
              </div>
              <div
                class="light-content-list"
                v-if="brightPointList[2].title"
              >
                <img
                  src=""
                  alt=""
                >
                <div class="light-box">
                  <div class="title">{{brightPointList[2].title}}</div>
                  <div class="subtitle">{{brightPointList[2].content}}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="detail_footer"></div>
        </div>
        <!-- 精彩现场 -->
        <div
          class="detail_block detail-video-photo"
          v-if="photoStageList"
        >
          <div class="detail_title">
            <div class="title">精彩现场</div>
            <div>
              <div
                class="count"
                @click="goShowDetailsPhoto"
              >查看更多</div>
            </div>
          </div>
          <div class="detail_diy_content">
            <div class="video-photo-container">
              <div class="container">
                <div
                  class="video-item"
                  v-for="(photoStage,index) in photoStageList"
                  :key="photoStage.id"
                >
                  <img
                    :src="photoStage.photoUrl"
                    alt=""
                    class="video-item-img left-border-radius"
                    @click="showImgs(photoStage.videoUrl,photoStage.photoUrl,index)"
                  >
                  <img
                    v-if="photoStage.videoUrl"
                    src=""
                    alt=""
                    class="video-item-img-play"
                  >
                </div>
                <!-- <div
                  class="video-item"
                >
                  <img
                    :src="photoStage.photoUrl"
                    alt=""
                    class="video-item-img left-border-radius"
                  >
                </div> -->
              </div>
            </div>
          </div>
        </div>
        <!-- 演出详情 -->
        <div class="detail_title detail_block">
          <div class="title">
            <span>演出详情</span>
          </div>
        </div>
        <!-- // 返回带标签的内容 -->
        <div class="detail_content detail_block">
          <div class="detail_richtext">
            <div
              class="details_box"
              v-html="showInfo.detail"
            >
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 购票须知 -->
    <div
      id="notice"
      class="detail_block fold_mask_modal mt10 mb10"
    >
      <div class="detail_block detail-richtext">
        <div class="detail_title">
          <span class="title">购票须知</span>
        </div>
      </div>
      <div
        class="detail_content"
        v-html="showInfo.ticketNotes"
      >
      </div>
    </div>
    <!-- 为你推荐 -->
    <div class="recommend">
      <div>
        <div class="detail_block detail_recommand">
          <div class="detail_title detail_block">
            <div class="title">
              <span>为你推荐</span>
            </div>
          </div>
          <div class="detail_content">
            <div class="recommend_list">
              <div
                class="recommend_item"
                @click="goShowDetails"
              >
                <div class="recommend-show-poster">
                  <div class="lazyimage com-img-bg recommend-show-poster-img">
                    <img
                      class="poster"
                      src="https://p0.meituan.net/myvideodistribute/d9ae7f4dcf3fc78c7ac679135aead7a8213563.png@200w_270h_1c_1e"
                      alt=""
                    >
                  </div>
                </div>
                <div class="recommend-show-detail box-flex">
                  <div class="recommend-show-detail-info">
                    <p class="recommend-show-detail-name">
                      <span>2021北京草莓音乐节</span>
                    </p>
                    <p class="recommend-show-detail-time">2021.5.2 - 2021.5.4</p>
                    <p class="recommend-show-detail-addr">延庆区 北京世园公园-北京草莓音乐节</p>
                  </div>
                  <p class="recommend-show-detail-tag box-flex">
                    <span class="i-tips i-tips-compute">
                      <div
                        class="i-tips i-tips-yu"
                        label="预订"
                      >
                        <!-- 预定 -->
                      </div>
                      <div class="i-tips-price">
                        <span class="com-price">460-1180</span>
                        <span class="com-price-suffix">元</span>
                      </div>
                    </span>
                    <span class="i-tips-compute i-tips-self">自营</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 购票 -->
    <div class="bottom-component bottom-bg">
      <div class="bomttom-button-container">
        <div class="bottom-button">
          <div class="detail-normal-button">
            <span>立即购票</span>
          </div>
        </div>
        <div class="bottom-button-ui-holding bottom-component-ipx"></div>
      </div>
    </div>

    <!-- 回首页 -->
    <div
      class="go-home"
      @click="goShowHome"
    >
      <span>去首页</span>
    </div>
  </div>
</template>
<script>
// import { ImagePreview } from 'vant'
export default {
  props: ['id'],
  data: () => ({
    scrollflag: true,
    hasDiscounts: true,
    hasphotoStageList: true,
    travelGuide: true,
    hasbrightPoint: true,
    hasVideoPhoto: true,
    brightPointList: [],
    photoStageList: [],
    videoList: [],
    thumImages: [],
    myId: 0,
    showInfo: {},
    setTicketList: [],
    priceList: [],
    ImagePreviews: []
  }),
  created() {
    console.log(this.$route)
    this.getshowDetails(this.$route.params.id)
  },
  methods: {
    // 图片预览
    async showImgs(isVideo, photoUrl, index) {
      console.log(isVideo, photoUrl, index)
      // ImagePreview({
      //   images: photoUrl
      // })
    },
    // 获取详情
    async getshowDetails(showid) {
      console.log(showid)
      const res = await this.$http.getshowDetails(showid)
      this.showInfo = res.data[0]
      this.setTicketList = res.data[0].promotional.setTicketList
      this.brightPointList = res.data[0].brightPointList
      this.photoStageList = JSON.parse(JSON.stringify(res.data[0].photoStageList))
      this.priceList = res.data[0]
      console.log(this.showInfo)
      console.log(this.setTicketList[0])
    },
    goShowHome() {
      this.$router.push('/show')
    },
    goShowDetailsPhoto() {
      this.$router.push('/show/showdetailsphoto')
    },
    goShowDetails(id) {
      this.$router.push(`/show/showdetails${id}`)
    },
    // 滚动触发函数
    realScroll() {
      // this.scrollflag = !this.scrollflag
      console.log(2)
    },
    // 节流函数
    throttle(fn, waitTime, runTime) {
      let timeout
      let startTime = new Date()
      return function () {
        const curTime = new Date()
        clearTimeout(timeout)
        if (curTime - startTime >= runTime) {
          startTime = curTime
          // 时间没到,重置时间
        } else {
          timeout = setTimeout(fn, waitTime)
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.showdetail {
  width: 100%;
  height: 100vh;
  overflow: scroll;
  padding-bottom: 60px;
  .left-border-radius {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  // 小标题专用
  .detail_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0;
    padding: 13px 15px 0;
    font-size: 17px;
    color: #333;
    clear: both;
    box-sizing: border-box;
    .title {
      font-weight: 600;
      font-size: 17px;
      color: #333;
    }
    .count {
      position: relative;
      font-size: 12px;
      font-weight: 400;
      color: #4d5578;
      padding-right: 12px;
      opacity: 0.76;
    }
    .count:after {
      content: "";
      position: absolute;
      width: 6px;
      height: 6px;
      display: inline-block;
      transform: translateY(-50%) rotate(45deg);
      top: 50%;
      right: 5px;
      border: 1px solid #bbb;
      border-bottom: none;
      border-left: none;
    }
  }
  .webketbox {
    box-orient: vertical;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  // 演出顶部
  .detail_basic {
    display: flex;
    padding: 20px 20px 24px;
    background: url(//www.dpfile.com/app/myshow/static/img/bg@2x.png);
    background-size: 100% 100%;
    flex-direction: column;
    font-family: DINAlternate-Bold;
    .detail_header {
      display: flex;
      .detail_poster {
        width: 104px;
        height: 138px;
        border-radius: 8px;
        overflow: hidden;
        .poster {
          width: 100%;
          height: 100%;
        }
      }
      .detail_header_info {
        flex: 1;
        padding-left: 10px;
        position: relative;
        .detail_name {
          color: #fff;
          font-size: 17px;
          text-align: left;
        }
        .detail_price_bar {
          position: absolute;
          bottom: -3px;
          width: 100%;
          padding-right: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .detail_price {
            position: relative;
            color: #fff;
            font-size: 14px;
          }
          .detail_price_yuan {
            position: relative;
            left: -1px;
            font-size: 12px;
          }
          .seat-container {
            vertical-align: middle;
            position: relative;
            height: 14px;
            font-size: 10px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: #fff;
            line-height: 14px;
            opacity: 0.6;
          }
          .seat-container:after {
            content: "";
            position: absolute;
            top: 50%;
            right: -15%;
            width: 5px;
            height: 5px;
            transform: translateY(-50%) rotate(45deg);
            border: 1px solid #d0d0d0;
            border-bottom: none;
            border-left: none;
          }
        }
      }
    }
    // 演出地址
    .detail_venue_address_container {
      background-image: linear-gradient(
        270deg,
        rgba(28, 27, 54, 0.73),
        rgba(21, 22, 51, 0.73)
      );
      border-radius: 8px;
      margin-top: 10px;
      padding: 13px 8px 13px 12px;
      .venue_address_container {
        display: flex;
      }
      .venue_container {
        display: flex;
        flex: 1;
        flex-direction: column;
        font-size: 14px;
        color: #fff;
        text-align: left;
        .date {
          padding-bottom: 4px;
          font-family: DINAlternate-Bold;
        }
        .address {
          display: flex;
          font-size: 13px;
          .address_city {
            padding-right: 8px;
            flex-shrink: 0;
          }
        }
      }
      .venue_guide {
        display: flex;
        flex-direction: column;
        align-items: center;
        .travel_guide_icon {
          height: 24px;
          width: 24px;
        }
      }
    }
    .detail_service_titles_container {
      margin: 13px 0 0;
      max-height: 18px;
      overflow: hidden;
    }
    .service_titles {
      display: flex;
      flex-wrap: wrap;
      .service_title_item {
        padding: 0 12px;
        .service_icon_container {
          height: 12px;
          width: 12px;
          display: inline-block;
          vertical-align: middle;
          margin-right: 3px;
        }
      }
      .item_title {
        font-size: 11px;
        color: #f1cba0;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        left: -3px;
        opacity: 0.6;
        font-family: PingFangSC-Regular;
      }
    }
    .detail_buttons_container {
      margin: 16px 0 0;
      .detail_buttons {
        display: flex;
        justify-content: space-between;
        font-family: PingFangSC-Regular;
        .detail_button {
          background: rgba(212, 219, 255, 0.1);
          border-radius: 6px;
          height: 35px;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .share_button {
          margin-left: 15px;
        }
        .image_container {
          height: 16px;
          width: 16px;
        }
        .collect_img_off {
          animation: whiteCollect-data-v-a33a5630 0.5s;
        }
        .button_text {
          padding-left: 8px;
          font-size: 13px;
          color: #fff;
          text-align: left;
        }
      }
    }
  }
  // 有优惠
  .promotion-container {
    text-align: left;
    .promotion-container-main {
      flex: 0.9;
      width: 90%;
      overflow: hidden;
      color: #666;
      padding-top: 2px;
      .type {
        margin-bottom: 3px;
        height: 17px;
        .label {
          height: 14px;
          width: 26px;
          vertical-align: middle;
          display: inline-block;
          margin: -6px 3px 0 0;
        }
        .content {
          font-size: 12px;
          display: inline-block;
          margin-bottom: 7px;
          vertical-align: top;
          color: #666;
          font-family: PingFangSC-Regular;
        }
      }
    }
  }
  .detail_content {
    display: block;
    padding: 8px 15px;
    font-size: 14px;
    color: #666;
  }
  .detail_block {
    background: #fff;
    line-height: 1.8;
    color: #333;
    border-top: none;
    border-bottom: none;
    box-sizing: border-box;
  }
  // 演出
  .fold_mask_modal {
    position: relative;
    // 演出三块
    .detail_block {
      background: #fff;
      line-height: 1.8;
      color: #333;
      border-top: none;
      border-bottom: none;
      box-sizing: border-box;
      .detail_content {
        display: block;
        padding: 8px 15px;
        font-size: 14px;
        color: #666;
      }
      // .title {
      //   font-size: 15px;
      //   font-weight: 600;
      //   color: #111;
      // }
    }
    // 演出亮点
    .light_content {
      display: block;
      padding: 25px 30px;
      font-size: 14px;
      color: #666;
      background: #fcf4ec;
      background-size: 110px 90px;
      border-radius: 6px;
      .light-content-list {
        display: flex;
        align-items: flex-start;
        text-align: left;
        margin-top: 20px;
        img {
          width: 30px;
          height: 40px;
          margin: 5px 10px 0 0;
        }
        .light-box {
          width: 100%;
          .title {
            font-size: 15px;
            font-weight: 600;
            color: #111;
          }
          .subtitle {
            font-size: 13px;
            font-weight: 400;
            color: #666;
            line-height: 19px;
          }
        }
      }
      .light-content-list:first-child {
        margin-top: 0;
      }
    }
    // 精彩现场
    .detail_diy_content {
      .video-photo-container {
        flex: 1;
        width: 100%;
        height: 175px;
        padding: 10px 0 25px 15px;
        white-space: nowrap;
        text-align: left;
        .container {
          height: 140px;
          overflow-x: auto;
          overflow-y: hidden;
        }
        .video-item {
          display: inline-block;
          background: #fff;
          width: 210px;
          height: 140px;
          margin-right: 10px;
          box-sizing: border-box;
          border-radius: 4px;
          position: relative;
          .video-item-img {
            width: 210px;
            height: 140px;
          }
          .video-item-img-play {
            position: absolute;
            width: 34px;
            height: 34px;
            margin: auto;
            overflow: auto;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
          }
        }
      }
    }
  }
  //购票须知

  // 推荐竖表
  .recommend-show {
    padding: 13px 0 17px;
    margin-bottom: 5px;
  }
  .recommend-show-poster {
    position: relative;
    float: left;
    .recommend-show-poster-img {
      width: 100px;
      height: 135px;
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 0 2px 4px #c7cccd;
    }
    .poster {
      width: 100%;
      height: 100%;
    }
  }
  .recommend-show-detail {
    flex-direction: column;
    justify-content: space-between;
    height: 135px;
    padding-left: 10px;
    text-align: left;
    font-size: 12px;
    color: #888;
    line-height: 16px;
    .recommend-show-detail-info {
      .recommend-show-detail-name {
        max-height: 50px;
        margin-bottom: 8px;
        font-size: 16px;
        line-height: 25px;
        font-weight: 700;
        color: #111;
        box-orient: vertical;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .recommend-show-detail-time {
        font-family: PingFangSC-Regular;
        box-orient: vertical;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-top: 12px;
      }
      .recommend-show-detail-addr {
        margin-top: 4px;
        width: 200px;
        font-weight: 400;
      }
    }
    .recommend-show-detail-tag {
      font-size: 18px;
      position: relative;
      height: 20px;
    }
    .i-tips {
      display: flex;
      align-items: center;
      border-radius: 2px;
      text-align: center;
      font-size: 11px;
      line-height: 17px;
      margin-bottom: -1px;
    }
    .i-tips-compute {
      .i-tips-yu {
        background: #ffece1;
        color: #ff772d;
      }
      .i-tips-price {
        margin-bottom: -2px;
        .com-price {
          color: #000;
          font-weight: 500;
        }
        .com-price-suffix {
          transform: scale(0.86);
          color: #000;
        }
      }
      .i-tips-self {
        color: #ccc;
      }
    }
  }
  // 吸顶导航
  .anchor_container {
    position: fixed;
    // top: -120px;
    // opacity: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 42px;
    .anchor {
      display: flex;
      height: 100%;
      width: 100%;
      background: #fff;
    }
    .anchor-title {
      display: flex;
      justify-content: center;
      flex: 1;
    }
    .anchor-title-item {
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      font-size: 13px;
    }
    .anchor-selected {
      font-size: 16px;
      color: #f03d37;
      border-bottom: 2px solid #f03d37;
      font-weight: 600;
    }
  }

  // 购票按钮
  .bottom-bg {
    background-image: linear-gradient(
      -180deg,
      hsla(0, 0%, 100%, 0) 7%,
      #fff 69%
    );
  }
  .bottom-component {
    width: 100%;
    position: fixed;
    z-index: 2;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    .bomttom-button-container {
      width: 100%;
    }
    .bottom-button {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 54px;
    }
    .detail-normal-button {
      width: 335px;
      height: 46px;
      box-shadow: 0 2px 6px 0 #eabebc;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: linear-gradient(-137deg, #fa3a3d, #f03d37);
      border-radius: 25px;
      font-family: PingFangSC-Medium;
      font-size: 15px;
      color: #fff;
      box-sizing: border-box;
    }
    .bottom-button-ui-holding {
      width: 100%;
      height: 10px;
    }
  }
  // 去首页
  .go-home {
    position: fixed;
    bottom: 170px;
    right: 14px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    opacity: 0.9;
    background-color: #f03d37;
  }
}

// 通用样式
.detail_richtext {
  width: 100%;
  line-height: 1.8;
  text-align: left;
}
/deep/ img{
  width: 100%;
}
.box-flex {
  display: flex;
}
.mb10 {
  margin-bottom: 10px;
}
.mt10 {
  margin-top: 10px;
}
.fold-mask-modal {
  position: relative;
}
.recommend-show-detail-time {
  margin-top: 12px;
}
.recommend-show-detail-addr,
.recommend-show-detail-time {
  font-family: PingFangSC-Regular;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}
.recommend-show-detail-tag {
  font-size: 18px;
  position: relative;
  height: 20px;
}
.i-tips {
  background: #eef0ff;
  color: #5b62d8;
  height: 18px;
  padding: 1px 3px;
  margin-right: 3px;
  font-weight: 400;
  font-family: PingFangSC-Regular;
  line-height: 16px;
  font-size: 11px;
}
.i-tips:after {
  content: attr(label);
}
.i-tips-yu {
  background: #ffece1;
  color: #ff772d;
}
.i-tips-self {
  color: #ccc;
  position: absolute;
  bottom: 1px;
  right: 0;
  font-size: 10px;
  line-height: 17px;
}
.com-price {
  color: #f03d37;
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: baseline;
}
.com-price-suffix {
  font-family: ArialMT;
  color: #111;
  font-size: 13px;
  line-height: 14px;
  display: inline-block;
}
// 重置样式
body {
  font-size: 14px;
  color: #333;
  background: #f0f0f0;
  overflow-x: hidden;
  max-width: 100%;
  margin: 0 auto;
}
#app {
  font-family: Hiragino Sans GB, sans-serif, Helvetica, "5B8B4F53";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}
*,
:after,
:before {
  box-sizing: inherit;
}
a,
div {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a,
img {
  display: block;
}
img {
  width: 100%;
  border: 0;
}
.fold-mask-modal {
  position: relative;
}

.van-tabbar {
  display: none;
}
</style>
